<template>
  <div class="newmusic">
    <div class="H-nav">
      <button :class="{'Active':index===0}"
              @click="changeIndex(0)">新歌速递</button>
      <button :class="{'Active':index===1}"
              @click="changeIndex(1)">新碟上架</button>
    </div>
    <div class="newsong"
         v-if="isShow">
      <div class="wrapper">
        <span v-for="ar in area"
              :key="ar.id"
              :class="{'isActive':id===ar.id}"
              @click="changeId(ar.id)">{{ ar.value }}</span>
      </div>
      <div class="main">
        <ul>
          <li v-for="(item,index) in topSong"
              :key="item.id"
              @click=" playlist(index)">
            <span style="height:60px;line-height:60px;font-size:13px;"> {{ (index+1)>9?(index+1):'0'+(index+1) }}</span>
            <img v-lazy="item.album.blurPicUrl"
                 alt="">
            <div class="icon-size">
              <svg class="icon"
                   aria-hidden="true">
                <use xlink:href="#icon-gf-play"></use>
              </svg>
            </div>
            <p class="m-name">{{ item.name }}</p>
            <p class="alias"
               v-show="item.alias.length!==0">({{ item.alias[0] }})</p>
            <div class="author">
              <p v-for="(ar,index) in item.artists"
                 :key="index"
                 class="artist-list">{{ ar.name }}</p>
            </div>
            <p class="al-name">{{ item.album.name }}</p>
            <p class="time"
               v-if="item.bMusic">{{ formatDateTime(item.bMusic.playTime) }}</p>
          </li>
        </ul>
      </div>
    </div>
    <TopAlbum v-show="!isShow"></TopAlbum>
  </div>
</template>
<script>
import { getTopSong } from "@/api/artist"
import TopAlbum from "@/pages/Albums/newAlbums.vue"
import { mapMutations } from "vuex"
export default {
  data () {
    return {
      index: 0,
      id: 0,
      area: [{ id: 0, value: '全部' },
      { id: 7, value: '华语' },
      { id: 96, value: '欧美' },
      { id: 8, value: '日本' },
      { id: 16, value: '韩国' }],
      topSong: [],//新歌速递
      isShow: true,
    }
  },
  components: { TopAlbum },
  methods: {
    ...mapMutations(['updatedPlayList', 'updatedPlaylistIndex']),
    changeIndex (index) {
      this.index = index
      if (index === 1) {
        this.isShow = false
      } else {
        this.isShow = true
      }
    },
    changeId (id) {
      this.id = id
      this.getTopSong(id)
    },
    // 新歌速递
    async getTopSong (type) {
      let res = await getTopSong(type)
      if (res.code !== 200) return
      this.topSong = res.data
    },
    // 通知底部组件播放
    playlist (index) {
      // 封装传回去的playlist
      let al = this.topSong[index].album
      this.topSong[index]["al"] = al
      this.topSong[index].artists.forEach((item) => {
        let ar = [{ name: item.name }]
        this.topSong[index]["ar"] = ar
      })

      this.updatedPlayList(this.topSong)
      this.updatedPlaylistIndex(index)
      //绑定全局事件总线‘currentId’
      this.$bus.$emit('currentId', this.topSong[index].id)
    },
    formatDateTime (time) {
      var date = new Date(time)
      var minute = date.getMinutes()
      var second = date.getSeconds()
      minute = minute < 10 ? ('0' + minute) : minute
      second = second < 10 ? ('0' + second) : second
      return minute + ':' + second
    },
  },
  mounted () {
    this.getTopSong(0)
  }
}
</script>

<style lang="less" scoped>
.newmusic {
  .H-nav {
    width: 242px;
    height: 32px;
    border-radius: 15px;
    margin: 20px auto;
    border: 1px solid rgb(216, 213, 213);
    button {
      width: 120px;
      height: 30px;
      border: none;
      border-radius: 15px;
      background-color: #fff;
      font-size: 13px;
      color: #333333;
    }
    .Active {
      color: #fff;
      background-color: #bbbbbb;
    }
  }
  .wrapper {
    display: flex;
    margin-left: 140px;
    span {
      font-size: 14px;
      width: 40px;
      height: 30px;
      line-height: 30px;
      margin-right: 10px;
      color: #7a7575;
      cursor: pointer;
    }
    .isActive {
      transition: 0.1s;
      font-weight: 550;
      color: #333333;
    }
  }
  .main {
    margin-top: 10px;
    margin-left: 140px;
    ul {
      li {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        margin-bottom: 20px;
        position: relative;
        span {
          display: flex;
        }
        img {
          display: flex;
          border-radius: 6px;
          width: 60px;
          height: 60px;
          margin-left: 15px;
          margin-right: 15px;
          border: 1px solid rgb(242, 240, 240);
        }
        .icon-size {
          opacity: 0.9;
          position: absolute;
          top: 17px;
          left: 47px;
          width: 25px;
          height: 25px;
          border-radius: 18px;
          background-color: #fff;
          .icon {
            width: 12px;
            height: 12px;
            margin-left: 7px;
            margin-top: 6px;
          }
        }
        p {
          white-space: nowrap; /*不换行强制文本在一行显示*/
          overflow: hidden; /*超出盒子宽度部分文字被隐藏*/
          text-overflow: ellipsis; /*当文本溢出包含元素时发生的事情 ellipsis*/
          font-size: 13px;
          width: auto;
          height: auto;
          margin-top: 20px;
        }
        .alias {
          margin-top: 21px;
          color: #5f5b5b;
        }
        .author {
          display: flex;
          flex-wrap: wrap;
          position: absolute;
          color: #7a7575;
          left: 500px;
          width: 190px;
          margin-top: 20px;
          height: 16.9px;
          white-space: nowrap; /*不换行强制文本在一行显示*/
          overflow: hidden; /*超出盒子宽度部分文字被隐藏*/
          text-overflow: ellipsis; /*当文本溢出包含元素时发生的事情 ellipsis*/
          .artist-list {
            margin-top: 0;
            height: 17px;
          }
          .artist-list {
            &::after {
              display: inline;
              margin: 2px;
              content: "/";
            }
            &:last-of-type::after {
              content: "";
            }
          }
        }
        .al-name {
          position: absolute;
          left: 700px;
          width: 190px;
          color: #7a7575;
        }
        .time {
          position: absolute;
          left: 1000px;
          width: 80px;
          color: #b9b3b3;
        }
      }
    }
  }
}
</style>